<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="">
    <title>Tree</title>
    <style type="text/css">
        body {
            background-color: #eccc68;
        }

        canvas {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <script type="module">
        import {createCanvas, vector2, vector2random, constrain, random, map, animation, mouse, curve, circle, fill} from './spring/board.js'
        const width = 800, height = 800, r = 16
        const tree = [] // , walker = vector2()
        // tree[0] = vector2(width / 2, height / 2)

        class Walker {
            constructor(x, y, r=10, stuck=false) {
                if (x && y) {
                    this.pos = vector2(x || random(width), y || random(height))
                } else {
                    let i = ~~(random(4))
                    switch(i) {
                        case 0:
                            this.pos = vector2(random(width), 0)
                            break
                        case 1:
                            this.pos = vector2(random(width), height)
                            break
                        case 2:
                            this.pos = vector2(0, random(height))
                            break
                        case 3:
                            this.pos = vector2(width, random(height))
                            break
                    }
                }
                this.r = r
                this.stuck = stuck
            }

            show() {
                circle(this.pos.x, this.pos.y, this.r, 20)
                if (this.stuck) {
                    let hu = ~~(map(this.r, 1, r, 0, 300))
                    // fill('rgb(255, 55, 255)')
                    // console.log('rgb(' + hu + ', ' + hu + ', ' + hu + ')')
                    // fill('rgb(' + hu + ', 255, 255)')
                    fill('hsl(' + hu + ', 90%, 50%)')
                } else {
                    fill()
                }
            }

            walk() {
                this.pos.add(vector2random().mul(20))
                this.pos.x = constrain(this.pos.x, 0 + this.r, width - this.r)
                this.pos.y = constrain(this.pos.y, 0 + this.r, height - this.r)
            }

            checkStuck(tree) {
                for (let item of tree) {
                    let p2w = this.pos.clone().sub(item.pos)
                    if (p2w.length < this.r + item.r) {
                        this.pos.copy(item.pos.clone().add(p2w.normalize().mul(this.r + item.r)))
                        this.stuck = true
                        return true
                    }
                }
                return false
            }
        }
        tree.push(new Walker(width / 2, height / 2, 20, true))
        const walkers = [], maxWalker = 100, maxTree = 500
        for (let i = 0; i < maxWalker; ++i) {
            walkers.push(new Walker())
        }

        createCanvas(width / 2, height / 2)
        function draw() {
            for (let j = 0; j < 2; ++j) {
                for (let i = 0; i < walkers.length; ++i) {
                    walkers[i].walk()
                    walkers[i].show()
                    if (walkers[i].checkStuck(tree)) {
                        tree.push(walkers[i])
                        walkers.splice(i, 1)
                    }
                }
            }
            while (walkers.length < maxWalker && tree.length < maxTree) {
                let walker = new Walker()
                walker.r = constrain(walker.r * 0.79, 1, r)
                walkers.push(walker)
            }

            for (let item of tree) {
                item.show()
            }

        }
        animation(draw)
    </script>
</body>

</html>